<!--
 * 页面头部
 *
 * @Author: reisen7
 * @Date: 2025-11-26
-->
<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
      <span>音乐推荐系统</span>
    </div>
    <ul class="navbar">
      <li :class="{ active: item.name === activeName }" v-for="item in navMsg" :key="item.path"
        @click="goPage(item.path, item.name)">
        {{ item.name }}
      </li>
      <li>
        <div class="header-search">
          <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
          <div class="search-btn" @click="goSearch()">
            <i class="iconfont icon-search-button"></i>
          </div>
        </div>
      </li>
      <li v-show="!loginIn" :class="{ active: item.name === activeName }" v-for="item in loginMsg" :key="item.path"
        @click="goPage(item.path, item.name)">
        {{ item.name }}
      </li>
    </ul>
    <div class="header-right" v-show="loginIn">
      <div id='user'>
        <img :src='attachImageUrl(avator)'>
      </div>
      <ul class="menu">
        <li v-for="(item, index) in menuList" :key="index" @click="goMenuList(item.path)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { navMsg, loginMsg, menuList } from '../assets/data/header';

export default {
  name: 'the-header',
  data () {
    return {
      navMsg: [],    //左侧导航栏
      keywords: '',  //搜索关键字
      loginMsg: [],  //右侧导航栏
      menuList: [], //用户下拉菜单
    }
  },
  computed: {
    ...mapGetters([
      'activeName',
      'loginIn',
      'avator'
    ])
  },
  created () {
    this.navMsg = navMsg;
    this.loginMsg = loginMsg;
    this.menuList = menuList;
  },
  mounted () {
    document.querySelector('#user').addEventListener('click', function (e) {
      document.querySelector('.menu').classList.add("show");
      e.stopPropagation()           //关键在于阻止冒泡
    }, false);
    document.querySelector('.menu').addEventListener('click', function (e) {
      e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
    }, false);
    document.addEventListener('click', function () {
      document.querySelector('.menu').classList.remove('show');
    }, false);
  },

  methods: {
    //提示信息
    notify (title, type) {
      this.$notify({
        title: title,
        type: type
      })
    },
    goHome () {
      this.$router.push({ path: "/" });
    },
    goPage (path, name) {
      if (!this.loginIn && path === '/my-music') {
        this.notify('请先登录', 'warning');
      } else {
        this.$store.commit('setActiveName', name);
        this.$router.push({ path: path });
      }
    },
    goSearch () {
      this.$router.push({ path: '/search', query: { keywords: this.keywords } })
    },
    //获取图片地址
    attachImageUrl (srcUrl) {
      return srcUrl ? this.$store.state.configure.HOST + srcUrl : '../assets/img/user.jpg';
    },
    goMenuList (path) {
      if (path === 0) {
        this.$store.commit('setLoginIn', false);
        this.$store.commit('setIsActive', false);
        this.$router.go(0);
      } else {
        this.$router.push({ path: path });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.the-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2c3e50;
  padding: 15px 20px;
  color: white;
}

.header-logo {
  display: flex;
  align-items: center;
  cursor: pointer;

  img {
    height: 30px;
    margin-right: 10px;
  }

  span {
    color: white;
    font-size: 20px;
    font-weight: bold;
  }
}

.navbar {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;

  li {
    margin: 0 10px;
    cursor: pointer;
    transition: color 0.3s ease;

    &.active {
      color: #3498db;
    }

    &:hover {
      color: #3498db;
    }
  }
}

.header-search {
  display: flex;
  align-items: center;

  input {
    padding: 8px;
    border: none;
    border-radius: 4px 0 0 4px;
    outline: none;
  }

  .search-btn {
    background-color: #3498db;
    padding: 8px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;

    i {
      font-size: 28px;
      color: white;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;

  #user {
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }

  .menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: white;
    list-style: none;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    &.show {
      display: block;
    }

    li {
      padding: 5px 10px;
      cursor: pointer;
      color: #2c3e50;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #ecf0f1;
      }
    }
  }
}
</style>
